<template>
  <div class="record-details">
    <div class="item-wrap">
      <div class="item">

        <!--_id:"5c4f8a1bc345f7246966ccfc"-->
        <!--address:"详细地址"-->
        <!--category:2-->
        <!--connect_man:"联系人"-->
        <!--content:"测试内容"-->
        <!--create_time:"2019-01-28T23:02:51.881Z"-->
        <!--department:"院系"-->
        <!--dormitory_building:"宿舍楼"-->
        <!--imgs:Array[1]-->
        <!--name:"姓名"-->
        <!--phone:"13097979375"-->
        <!--repair_man:"5bcbefa765ec1b52cd3f4a94"-->
        <!--repair_time:"2019-01-29 09"-->
        <!--status:2-->
        <!--teach_building:"教学楼"-->
        <!--title:"维修员2号"-->
        <!--update_time:"2019-01-28T23:03:08.375Z"-->
        <Cell title="维修标题" >
          {{recordData.title}}
        </Cell>
        <Cell title="维修状态">
            {{recordData.status_text}}
        </Cell>
        <Cell title="报修人">
          {{recordData.connect_man}}
        </Cell>
        <Cell title="报修电话">
          {{recordData.phone}}
        </Cell>
        <Cell title="报修时间">
          {{recordData.create_time_text}}
        </Cell>
        <Cell title="报修地址" class="spe-cell" :label="recordData.address" />
        <Cell title="报修内容" class="spe-cell" :label="recordData.content" />
        <dyCell title="报修图片"

                style="background: #fff;border-top: 1px solid #d9d9d9;">

          <div class="img-wrap">
            <img
              @click="handleClick(idx)"
              v-for="(item, idx) in recordData.imgs"
              :key="idx"
              :src="item"
              class="img-item"
                 alt="">
          </div>
        </dyCell>
      </div>
    </div>
    <div class="btn-wrap" v-if="recordData.status == 2">
      <Button @click="handleDone"
              size="large"
              type="danger">上传维修完成凭证</Button>
    </div>

    <Popup
      class="popup"
      v-model="isShowPopup"
      position="center"
      @click.native="handleClose"
      popup-transition="popup-fade">
      <div
        class="popup-content"
        @click.stop>
        <Swipe
          :defaultIndex="defaultIndex"
          :auto="0"
          style="width: 100%;">
          <SwipeItem
            v-for="(item, idx) in recordData.imgs"
            :key="idx"
          >
            <img :src="item" alt="" style="width: 100%;">
          </SwipeItem>
        </Swipe>
      </div>
      <i
        @click="isShowPopup = false"
        class="el-icon-close
 close-btn"></i>
    </Popup>
  </div>
</template>

<script>
  import moment from 'moment'
  import {Cell, Popup, Swipe, SwipeItem,Button } from 'mint-ui'
  import dyCell from './components/cell'

  export default {
    name: 'repairRecordDetails',
    components: {
      Cell,
      dyCell,
      Popup,
      Swipe,
      SwipeItem,
      Button
    },
    data() {
      return {
        recordData: {},
        isShowPopup: false,
        defaultIndex: 0
      }
    },
    methods: {
      getData() {
        const id = this.$route.query.id;
        this.$axios.get(`/admin/repairRecord/details/${id}`)
          .then(res => {
          this.recordData = res.data;
          this.recordData.create_time_text
            = moment(res.data.create_time).format('YYYY-MM-DD HH:mm:ss');
            switch (res.data.status) {
              case 1:
                this.recordData.status_text = '待派单';
                break;
              case 2:
                this.recordData.status_text = '维修中'
                break;
              case 3:
                this.recordData.status_text = '已维修'
                break;
              default:
                this.recordData.status_text = '未知状态'
            }
        }).catch(err => console.log(err))
      },
      handleClick(index) {
        this.defaultIndex = index;
        this.$nextTick(() => {
          this.isShowPopup = true;
        })
      },
      handleClose() {
        this.isShowPopup = false;
      },
      handleDone() {
        this.$router.push({
          name: 'done',
          query: {
            id: this.$route.query.id
          }
        })
      }
    },
    created() {
      this.getData();

    }

  }
</script>

<style scoped lang="scss">

  .btn-wrap {
    box-sizing: border-box;
    padding: 10px;
  }

  .item-wrap {
    box-sizing: border-box;
    padding: 10px;
    background: #f8f8f8;

    .item {
      .img-wrap {
        display: flex;
        img {
          margin-right: 10px;
        }
      }
    }
  }

  /deep/ .spe-cell {
    .mint-cell-wrapper {
      background-image: none;
      border-top: 1px solid #d9d9d9;
      padding: 10px;
    }
  }

  .popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    transform: none;

    .popup-content {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 260px;
      transform: translate3d(0, -50%, 0);
    }

    .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 30px;
      color: #fff;
    }
  }
</style>
